<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加员工</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
        <form class="form-horizontal" id="addStaffInfo" enctype="multipart/form-data" method="post">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-3">
                    <input type="email" class="form-control" id="name" name="name" placeholder="姓名">
                </div>

            </div>

            <div class="form-group">
                <label  class="col-sm-2 control-label">性别</label>
                <label class="radio-inline  col-sm-1 control-label">
                    <div>
                         <input type="radio" name="gender" id="inlineRadio1" value="男" checked> 男
                    </div>
                </label>
                <label class="radio-inline col-sm-1 control-label">
                    <div>
                          <input type="radio" name="gender" id="inlineRadio2" value="女"> 女
                    </div>
                </label>
            </div>

            <div class="form-group">
                <label for="borth" class="col-sm-2 control-label">出生日期</label>
                <div class="col-sm-3">
                    <input type="date" class="form-control" id="borth" name="borth" >
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">部门</label>
                <div class="col-sm-3">
                    <select class="form-control" name="department">
                        <option value="市场部">市场部</option>
                        <option value="研发部">研发部</option>
                        <option value="生产部">生产部</option>
                        <option value="财务部">财务部</option>
                        <option value="技术部">技术部</option>
                        <option value="人事部">人事部</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-2 control-label">学历</label>
                <div class="col-sm-3">
                    <select class="form-control" name="education">
                        <option value="本科">本科</option>
                        <option value="研究生">研究生</option>
                        <option value="博士">博士</option>
                    </select>
                </div>
            </div>



           <div class="form-group">
                <label for="file" class="col-sm-2 control-label">头像</label>
                <div class="col-sm-3">
                    <input type="file" class="form-control" id="file" name="file">
                </div>
            </div>


            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" id="addStaffBtn">提交</button>
                    <button type="button" class="btn btn-primary" onclick="loadPage('allStaffs')" id="returnIndex">返回</button>
                </div>
            </div>
        </form>
</div>
</body>
<script>
   $(document).ready(function (){
       $("#addStaffBtn").on("click",function (){
           var data0=new FormData($("#addStaffInfo")[0])
            $.ajax({
                url:"/staff/addStaff",
                type: "POST",
                dataType: "text",
                data:data0,
                cache:false,
                processData: false,
                contentType:false,
                success:function (){
                    alert("添加新员工成功！")
                },
                error:function (){
                    alert("添加新员工失败！")
                }

            })
       })
   })

   function loadPage(url) {
       $.get(url,function(data,status){
           $("#right").html(data);
       });
   }
</script>
</html>